<!-- 红包商城商品信息 -->
<template>
  <div class="table">
    <el-tabs v-model="activeName" @tab-click="handleChangeTabs">
      <el-tab-pane label="商品列表" name="one">
        <SearchTable :selectStatus="selectStatus" :selectCategories="selectCategories" ref="searchTableRef" @handleAdd="handleAdd" @handleViewEdit="handleViewEdit" />
      </el-tab-pane>
      <el-tab-pane label="商品详情" name="two">
        <FormTab
          :id="selectId"
          :selectStatus="selectStatus"
          :selectCategories="selectCategories"
          :selectWhether="selectWhether"
          :selectPlatform="selectPlatform"
          :selectFreighTemplate="selectFreighTemplate"
          v-model:formStatus="formStatus"
          @handleInitData="clearData"
          @handleSuccess="handleSuccess"
          @getMallCategoryInfo="handleGetMallCategory"
          @getMallDeliverInfo="handleGetMallDeliver" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="mallGoodsInfo">
import SearchTable from "@/components/redPacketMallManage/mallGoodsInfo/SearchTable.vue";
import FormTab from "@/components/redPacketMallManage/mallGoodsInfo/FormTab.vue";
import { useDictData } from "@/hooks/network/useDictData";
import type { IDictData } from "@/types/dict";
import type { TabsPaneContext } from "element-plus";
import type { TabsMode, ViewMode, ViewModeFilter } from "@/types/common";
import type { IMallCategory } from "@/types/mallCategory";
import { getMallCategoryInfo } from "@/utils/api/mallCategory";
import type { IMallDeliver } from "@/types/redPacketMallManage/mallDeliver";
import { getMallDeliverInfo } from "@/utils/api/mallDeliver";

let { getDictData } = useDictData();
/* 表格状态 */
const formStatus = ref<ViewMode>("none");
/* 标签页切换 */
const activeName = ref<TabsMode>("one");
const selectId = ref(0);
/* 表格子组件的引用 */
const searchTableRef = useTemplateRef("searchTableRef");
/* 是否信息 */
const selectWhether = ref<Array<IDictData>>([]);
/* 上下架状态 */
const selectStatus = ref<Array<IDictData>>([]);
/* 平台 */
const selectPlatform = ref<Array<IDictData>>([]);
/* 商品分类 */
const selectCategories = ref<Array<IMallCategory>>([]);
/* 运费模板 */
const selectFreighTemplate = ref<Array<IMallDeliver>>([]);

/* 获取分类信息 */
function handleGetMallCategory() {
  getMallCategoryInfo<Array<IMallCategory>, unknown>()
    .then(res => {
      selectCategories.value = res.result;
    })
    .finally(() => {});
}

/* 获取运费模板信息 */
function handleGetMallDeliver() {
  getMallDeliverInfo<Array<IMallDeliver>, unknown>()
    .then(res => {
      selectFreighTemplate.value = res.result;
    })
    .finally(() => {});
}

/* 点击添加按钮 */
function handleAdd(code: ViewMode) {
  formStatus.value = code;
  activeName.value = "two";
}

/* 处理查看编辑 */
function handleViewEdit(id: number, code: ViewModeFilter) {
  selectId.value = id;
  formStatus.value = code;
  activeName.value = "two";
}

/* 处理切换标签页 */
function handleChangeTabs(tab: TabsPaneContext) {
  if (tab.props.name === "two") {
    formStatus.value = "edit";
  } else if (tab.props.name === "one") {
    clearData();
  }
}

/* 清除数据 */
function clearData() {
  selectId.value = 0;
  activeName.value = "one";
  formStatus.value = "none";
}

/* 处理修改成功 */
function handleSuccess() {
  searchTableRef.value?.getTableInfo();
}

getDictData("GOODS_TYPE", selectStatus);
getDictData("WHETHER", selectWhether);
getDictData("PLATFORM_TYPE", selectPlatform);
handleGetMallCategory();
handleGetMallDeliver();
</script>

<style scoped></style>
